<html xmlns:th="http://www.thymeleaf.org">
<head th:include="basepage/head::head"></head>
<body>
<div id="page-wrapper" class="page-loading">
    <div class="preloader">
        <div class="inner">
            <!-- Animation spinner for all modern browsers -->
            <div class="preloader-spinner themed-background hidden-lt-ie10"></div>

            <!-- Text for IE9 -->
            <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
        </div>
    </div>
    <div id="page-container" class="header-fixed-top sidebar-visible-lg-full">
        <header th:include="basepage/left::left"></header>
        <!--主要内容 START-->
        <div id="main-container" class="main-content">
            <header th:include="basepage/header::header"></header>
            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">
    			<div class="block">
    				<div class="row">
                    <div class="col-xs-6">
                        <div id="bar" style="width: 100%;height:400px;"></div>
                    </div>
                    <div class="col-xs-6">
                        <div id="line" style="width: 100%;height:400px;"></div>
                    </div>
                   </div>
                 </div> 
                      
			<!--小的第一排-->
             	<div class="block">
             		<div class="row" style="margin-bottom: 20px;">
             			<form action="page_forms_components.html" method="post" class="form-horizontal form-bordered " onsubmit="return false;">
             			<div class="form-group">
                                            
                                            <div class="col-xs-4">
                                            	<label class="col-md-3 control-label" for="example-input1-group3">时间范围：</label>
		                                        <button type="button" class="btn btn-primary">1小时</button>
		                                        <button type="button" class="btn btn-success">6小时</button>
		                                        <button type="button" class="btn btn-info">12小时</button>
		                                        <button type="button" class="btn btn-warning">1天</button>
		                                        <button type="button" class="btn btn-danger">7天</button>
		                               
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="input-group input-daterange" data-date-format="mm/dd/yyyy">
                                                    <input type="text" id="example-daterange1" name="example-daterange1" class="form-control" placeholder="From">
                                                    <span class="input-group-addon"><i class="fa fa-chevron-right"></i></span>
                                                    <input type="text" id="example-daterange2" name="example-daterange2" class="form-control" placeholder="To">
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-effect-ripple btn-primary">查询</button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                  </form>
             		</div>
             		<div class="row">
             			
                        <div class="col-xs-3">
                            <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">活跃消息个数</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo1" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                           <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">延迟消息</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo2" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                           <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">不可见消息</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo3" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                           <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">发送消息请求量</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo4" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
			<!--小的第二排-->
				<div class="block">
             		<div class="row">
                        <div class="col-xs-3">
                            <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">批量发送消息请求量</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo5" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                           <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">接收消息请求量</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo6" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                           <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">批量接收消息请求量</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo7" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3">
                           <div class="block new-border">
                                <div class="block-title pd10">
                                	<div class="mb5">批量删除请求量</div>
                                	<div>周期：5m，聚合方式：Angular</div>
                                </div>
                                <div>
                                	<div id="demo8" style="width: 100%;height:250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
            <!-- END Page Content -->
        </div>
        <!--主要内容 END-->
        <!-- END Main Container -->
    </div>
    <!-- END Page Container -->
</div>
<!-- END Page Wrapper -->
<header th:include="basepage/footer::footer"></header>
</body>
</html>
